<template>
	<view class="flex-col page">

		<view class="mt-98 flex-col group">
			<view class="flex-col">
				<view class="flex-col items-center self-stretch">
					<image class="image_2" src="/static/image/logo-1.jpg" />

				</view>
			</view>
			<view class="flex-col group_2">
				<view class="flex-row items-center self-stretch group_3">
					<image class="image_4" src="../../static/icons/phone.png" />
					<u-input placeholder="请输入手机号码" v-model="loginForm.mobile" maxlength="11"></u-input>
				</view>
				<view class="flex-row items-center self-stretch group_4">
					<image class="image_4" src='/static/icons/u-account.png' />
					<u-input placeholder="请输入昵称" v-model="loginForm.nickname"></u-input>
				</view>
				<!-- 				<view class="flex-row items-center self-stretch group_4">
					<image class="image_4" src="../../static/icons/u-account.png" />
					<u-input placeholder="请输入登录账号" v-model="loginForm.username"></u-input>
				</view> -->

				<!-- 				<view class="flex-row items-center self-stretch group_5">

					<image class="image_4" src="../../static/icons/verifycode.png" />
					<u-input placeholder="请输入验证码">

						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>

							<u-button @tap="getCode" :text="tips" type="success"
								custom-style="font-size:28rpx"></u-button>
						</template>

					</u-input>
				</view> -->
				<view class="flex-row self-stretch group_6">
					<image class="self-center image_5" src="../../static/icons/keys.png" />
					<u-input placeholder="请输入登录密码(不少于8位)" type="password" v-model="loginForm.password"></u-input>
				</view>
				<view class="flex-row items-center self-stretch group_7">
					<image class="image_5" src="../../static/icons/keys.png" />
					<u-input placeholder="请输入确认密码" type="password" v-model="loginForm.rePassword"></u-input>
				</view>
				<view class="flex-row items-center self-stretch group_7" style="border: 0;">
					<image class="image_5" src="../../static/icons/u-account.png" />
					<u-input placeholder="请输入邀请码" v-model="loginForm.invitedByCode"></u-input>
				</view>
			</view>
			<view style="padding: 10rpx 20rpx;">
				<checkbox-group>
					<view style="display: flex;">
						<view style="margin-right: 10rpx;">
							<u-checkbox class="tea" :model="redmeChecked" :class="{'checked':redmeChecked}"
								@change="readmeCheck" :checked="redmeChecked" shape="circle"
								activeColor="#ff0000"></u-checkbox>
						</view>
						<view style="flex: 1; align-self: center; font-size:14px;  color: rgb(140, 140, 140);">
							我已阅读并同意<text style="color:#ee0000;" @click="showContract()">《客户服务协议》</text>
						</view>
					</view>

				</checkbox-group>
			</view>
			<view class="flex-col group_8">
				<view class="flex-col justify-start items-start self-stretch text-wrapper_2" @click="save">
					<text class="text_8">注 册</text>
				</view>
				<text class="self-center font text_9 mt-19" @click="goLogin">账号密码登录</text>
			</view>
		</view>
		<u-toast ref="utoast"></u-toast>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				tips: "发送验证码",
				loginForm: {},
				submited: false,
				redmeChecked: false,
			};
		},
		onLoad(options) {
			if (options.scene) {
				const scene = decodeURIComponent(options.scene);
				this.$set(this.loginForm, 'invitedByCode', scene);
				uni.setStorageSync("langpin_register_inviteCode", scene)
			} else {
				if (uni.getStorageSync("langpin_register_inviteCode")) {
					this.$set(this.loginForm, 'invitedByCode', uni.getStorageSync("langpin_register_inviteCode"));
				} else {
					this.$set(this.loginForm, 'invitedByCode', "");
				}
				//uni.removeStorageSync("langpin_register_inviteCode")
			}
		},
		methods: {
			readmeCheck(e) {
				console.log(e)
				this.redmeChecked = !this.redmeChecked;
			},
			showContract() {
				uni.navigateTo({
					url: '/pages-publics/protocols/protocols'
				})
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			save() {
				if (!this.redmeChecked) {
					uni.showToast({
						title: '请先阅读并同意用户隐私协议',
						icon: 'none'
					});
					return;
				}
				if (this.submited) {
					return;
				}
				this.submited = true;

				// if (!this.loginForm.username) {
				// 	this.submited = false;
				// 	uni.$u.toast('请输入登录账号');
				// 	return;
				// }
				if (!this.loginForm.mobile) {
					this.submited = false;
					uni.$u.toast('请输入手机号码');
					return;
				}
				if (!uni.$u.test.mobile(this.loginForm.mobile)) {
					this.submited = false;
					uni.$u.toast('请输入正确的手机号码');
					return;
				}
				if (!this.loginForm.nickname) {
					this.submited = false;
					uni.$u.toast('请输入昵称');
					return;
				}
				if (!this.loginForm.password) {
					this.submited = false;
					uni.$u.toast('请输入密码');
					return;
				}
				if (this.loginForm.password.length<8) {
					this.submited = false;
					uni.$u.toast('请输入8位以上的密码');
					return;
				}
				if (!this.loginForm.rePassword) {
					this.submited = false;
					uni.$u.toast('请输入密码');
					return;
				}
				if (this.loginForm.rePassword != this.loginForm.password) {
					this.submited = false;
					uni.$u.toast('两次输入的密码不一致');
					return;
				}

				if (!this.loginForm.invitedByCode) {
					this.submited = false;
					uni.$u.toast('请输入邀请码 ');
					return;
				}

				this.$post({
					url: `${this.$Utils.ApiUrl}/signup`,
					data: this.loginForm
				}).then(res => {
					this.$refs.utoast.show({
						message: "注册成功,请前往登录",
						complete() {
							uni.redirectTo({
								url: '/pages-publics/login/login'
							})
						}
					})
				}).catch((err) => {
					console.log(err)
					this.submited = false;
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			goLogin() {
				uni.redirectTo({
					url: '/pages-publics/login/login'
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.mt-9 {
		margin-top: 15.7rpx;
	}

	.ml-13 {
		margin-left: 22.67rpx;
	}

	.mt-19 {
		margin-top: 33.14rpx;
	}

	.page {
		padding-bottom: 118.6rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.image {
			width: 100vw;
			height: 25.5814vw;
		}

		.group {
			padding: 0 97.67rpx;

			.image_2 {
				width: 200.42rpx;
				height: 200.42rpx;
			}

			.image_3 {
				border-radius: 87.21rpx;
				width: 200.42rpx;
				height: 200.42rpx;
			}

			.font {
				font-size: 28.42rpx;
				font-family: SourceHanSansCN;
				line-height: 22.6rpx;
				color: #888888;
			}

			.text {
				color: #5e5555;
				line-height: 22.45rpx;
			}

			.group_2 {
				margin-top: 66.28rpx;

				.group_3 {
					padding: 0 12.21rpx 13.95rpx;
					border-bottom: solid 1.74rpx #a6a6a6;

					.text_2 {
						line-height: 22.57rpx;
					}
				}

				.group_4 {
					padding: 26.16rpx 12.21rpx 13.95rpx;
					border-bottom: solid 1.74rpx #a6a6a6;

					.text_3 {
						line-height: 22.53rpx;
					}
				}

				.image_4 {
					width: 34.88rpx;
					height: 34.88rpx;
				}

				.group_5 {
					padding: 24.42rpx 8.72rpx 17.44rpx;
					border-bottom: solid 1.74rpx #a6a6a6;

					.text-wrapper {
						margin-right: 8.72rpx;
						padding: 6.98rpx 0 10.47rpx;
						background-color: #00baad;
						border-radius: 17.44rpx;
						height: 41.86rpx;

						.text_4 {
							margin-left: 13.95rpx;
							margin-right: 3.49rpx;
							color: #ffffff;
							line-height: 22.71rpx;
						}
					}
				}

				.group_6 {
					padding: 26.16rpx 5.23rpx 6.98rpx;
					border-bottom: solid 1.74rpx #a6a6a6;

					.text_5 {
						line-height: 22.69rpx;
					}
				}

				.image_5 {
					width: 41.86rpx;
					height: 41.86rpx;
				}

				.group_7 {
					padding: 26.16rpx 8.72rpx 17.44rpx;
					border-bottom: solid 1.74rpx #a6a6a6;

					.text_6 {
						line-height: 22.73rpx;
					}
				}

				.text_7 {
					margin-left: 76.74rpx;
					margin-top: 31.4rpx;
					color: #808080;
					line-height: 22.59rpx;
				}
			}

			.group_8 {
				margin-top: 94.19rpx;
				padding: 0 59.3rpx;

				.text-wrapper_2 {
					padding: 20.95rpx 10.47rpx;
					background-color: #ff0101;
					border-radius: 32.16rpx;

					.text_8 {
						margin-left: 170.93rpx;
						color: #ffffff;
						font-size: 28.42rpx;
						font-family: SourceHanSansCN;
						line-height: 29.65rpx;

					}
				}

				.text_9 {
					color: #ff0101;
					line-height: 22.83rpx;
				}
			}
		}
	}
</style>